<template>
  <div class="appointment">
    <yd-cell-group>
      <yd-cell-item arrow class="item">
        <span slot="left">所在城市</span>
        <span slot="right">北京</span>
      </yd-cell-item>

      <yd-cell-item arrow class="item">
        <span slot="left">所在楼宇</span>
        <span slot="right">融创一号楼</span>
      </yd-cell-item>
    </yd-cell-group>
    <appointment-radio
      :appointmentPeople="appointmentPeople"
      :timePeriod="timePeriod"
      @change="change"
    >
      <div slot="other" class="other" v-show="appointmentPeople === '2'">
        <yd-cell-item class="item">
          <span slot="left">预约人数</span>
          <yd-input slot="right" v-model="num" max="4" required></yd-input>
        </yd-cell-item>

        <div class="otherInfo">
          <div class="left">预约人</div>
          <div class="right">
            <yd-cell-item class="name">
              <yd-input slot="right" v-model="name" max="20" required :show-clear-icon="false"></yd-input>
            </yd-cell-item>
            <yd-cell-item class="phone">
              <yd-input slot="right" v-model="phone" max="11" ref="phone" required regex="mobile"></yd-input>
            </yd-cell-item>
          </div>
        </div>
      </div>
    </appointment-radio>
    <yd-cell-group>
      <yd-cell-item arrow class="item" @click.native="openStartDate">
        <span slot="left">开始时间</span>
        <span slot="right">{{startDateStr}}</span>
      </yd-cell-item>

      <yd-cell-item arrow class="item" @click.native="openEndDate">
        <span slot="left">结束时间</span>
        <span slot="right">{{endDateStr}}</span>
      </yd-cell-item>
    </yd-cell-group>

    <yd-cell-group>
      <yd-cell-item arrow class="item">
        <span slot="left">预约楼层</span>
        <span slot="right">5楼(40个可预订工位)</span>
      </yd-cell-item>
    </yd-cell-group>

    <p class="tip">
      <img src="../../assets/icon/warn.png">5楼共有4个部门：市场运营1部、市场运营2部、营销策划部，网络技术部。
    </p>

    <yd-button size="large" type="primary" class="btn-blue" @click.native="confirm">确认预约</yd-button>

    <date-time :time="startDate" :show="startDateShow" @changeTime="changeStartDate"></date-time>
    <date-time :time="endDate" :show="endDateShow" @changeTime="changeEndDate"></date-time>
  </div>
</template>
<script>
import appointmentRadio from '../../base/Radio'
import dateTime from '../../base/DateTime'
import util from '@/util/util'
export default {
  name: 'Appointment',
  components: { appointmentRadio, dateTime },
  data() {
    return {
      appointmentPeople: '1',
      timePeriod: '1',
      num: '',
      name: '',
      phone: '',
      startDate: new Date().getTime(),
      startDateStr: '',
      startDateShow: false,
      endDate: new Date().getTime(),
      endDateStr: '',
      endDateShow: false
    }
  },
  methods: {
    change(obj) {
      this.appointmentPeople = obj.appointmentPeople
      this.timePeriod = obj.timePeriod
    },
    openStartDate() {
      this.endDateShow = false
      this.startDateShow = true
    },
    openEndDate() {
      this.startDateShow = false
      this.endDateShow = true
    },
    changeStartDate(newTime) {
      this.startDateShow = false
      if (!newTime) {
        return
      }
      this.startDate = newTime
      this.startDateStr = this.translate(this.startDate)
    },
    changeEndDate(newTime) {
      this.endDateShow = false
      if (!newTime) {
        return
      }
      this.endDate = newTime
      this.endDateStr = this.translate(this.endDate)
    },
    translate(time) {
      if (!time) return ''
      const md = util.formatTime(time, 'M/D')
      const weekDay = util.formatDay(time)
      const moment = new Date(time).getHours()
      let piceTimeStr = ''
      if (moment >= 12) {
        piceTimeStr = '下午'
      } else if (moment >= 9) {
        piceTimeStr = '上午'
      } else {
        piceTimeStr = '全天'
      }
      return `${md} ${weekDay} ${piceTimeStr}`
    },
    confirm() {
      this.$router.push('/select-location')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.appointment
  padding-top: 0.11rem;
  >>>.yd-cell-box
    margin-bottom: 0.11rem;
  >>>.yd-cell
    background: none;
  .yd-cell-item:not(:last-child):after
    display: none;
  .item
    margin-bottom: 1px;
    background: $white;
    padding-left: 0.4rem;
    >>>.yd-cell-left
      font-weight: 500;
    >>>.yd-cell-left, >>>.yd-cell-right
      color: $darkText !important;
      font-size: 0.3rem;
    >>>.yd-cell-right
      padding-right: 0.34rem;
      span
        padding-right: 0.12rem;
  >>>.yd-radio>input[type=radio]:checked+.yd-radio-icon>i
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transition: all 0.2s ease-in-out;
  >>>.yd-radio-icon>i
    width: 6px;
    height: 12px;
    top: 45%;
    left: 50%;
    border: 2px solid #fff;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    background-color: none;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
  .tip
    font-size: 0.24rem;
    color: $grayText;
    line-height: 0.37rem;
    padding: 0 0.38rem 0 0.6rem;
    position: relative;
    margin: 0.26rem 0;
    img
      position: absolute;
      width: 0.24rem;
      height: 0.24rem;
      display: block;
      left: 0.26rem;
      top: 0.06rem;
  >>>.yd-input
    span
      padding-right: 0 !important;
    input
      text-align: right !important;
      color: $darkText;
  >>>.otherInfo
    background: $white;
    display: flex;
    margin-bottom: 1px;
    color: $darkText;
    font-size: 0.3rem;
    .left
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      padding-left: 0.4rem;
      flex: 1;
    .right
      flex: 3;
      .yd-cell-item
        line-height: 1rem;
        text-align: right;
        flex: 1;
        .yd-cell-right
          padding-right: 0.34rem;
        &:first-child
          border-bottom: 1px solid $bgColor;
</style>
